<template>
	<view class="history_single_box">
		<!-- 招揽记录 -->
		<view class="user_message" v-if="wxRecordTable.length > 0">
			<view class="user_message_user utils_patternOne" v-for="(item, index) in wxRecordTable" :key="index">
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">车架号：{{ item.vin }}</text>
						<view class="tips"></view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<!-- <text class="user_content_text">车架号：{{item.vin}}</text> -->
						<text class="user_content_text">任务时间：{{item.taskDate}}</text>
						<text class="user_content_text">招揽时间：{{item.finishTime}}</text>
						<text class="user_content_text">招揽结果：{{item.result || '--'}}</text>
						<text class="user_content_text">客户反馈：{{item.customerFeedBack || '--'}}</text>
						<text class="user_content_text">备注：{{item.remark}}</text>
						<text class="user_content_text">招揽人员：{{item.personLiable}}</text>
						<text class="user_content_text">门店名称：{{item.shopName}}</text>
					</view>
				</view>
			</view>
		</view>
	
		<view class="user_message" v-else>
			<view class="user_message_user utils_patternOne">
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">车架号：--</text>
						<view class="tips"></view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<text class="user_content_text">任务时间：--</text>
						<text class="user_content_text">招揽时间：--</text>
						<text class="user_content_text">招揽结果：--</text>
						<text class="user_content_text">客户反馈：--</text>
						<text class="user_content_text">备注：--</text>
						<text class="user_content_text">招揽人员：--</text>
						<text class="user_content_text">门店名称：--</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js'
	import utils from '@/utils/uitils.js'
	export default {
		data () {
			return {
				wxRecordTable: [],
				vin: '',
				combinedArray: [],
			}
		},
		
		onLoad (options) {
			console.log('接收到的参数', options)
			this.vin = options.vin
		},
		
		mounted() {
			this.getWxPlatformRecordList()
		},
		
		methods: {
			// 获取招揽记录
			async getWxPlatformRecordList() {
				try {
					let reqData = {
						dateRange: {
							beginDate: utils.geBeforetDay(-730),
							endDate: utils.getDay(),
						},
						paged: {
							pageSize: 99,
							pageIndex: 1,
							orderBy: ''
						},
						personLiable: '',
						finish: 1,
						vin: this.vin,
						node: [],
						way: '',
						type: '',
						customType: '',
					}
	
					const webRes = await apiRqs.getDingbaoWorkList(reqData)
					console.log('平台招揽记录 result', webRes.data.data)
					this.wxRecordTable = webRes.data.data
					this.wxRecordTable = this.wxRecordTable.map(item => {
						// 遍历数组，将属性值为null的替换为空字符串
						for (let key in item) {
							if (item[key] === null || item[key] === '1753-01-01 00:00:00') {
								item[key] = '--'
							}
						}
						return item
					})
					
					console.log('wxRecordTable', this.wxRecordTable)
	
				} catch (e) {
					console.log('请求平台招揽记录失败', e)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.history_single_box {
		padding: 24rpx;
		background-image: url('../../../static/byd-img/jiaoji@1x.png');
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		
		/* 公共样式-内外边距、背景色、边框弧度 */
		.utils_patternOne {
			margin-bottom: 32rpx;
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}
		
		/* 公共样式-区块标题 */
		.utils_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			
			.title_text {
				position: relative;
				font-size: 28rpx;
				font-weight: 500;
				color: #1D2129;
				.title_left_text {
					margin-left: 24rpx;
				}
				.tips {
					position: absolute;
					top: 8rpx;
					left: 0;
					border-radius: 8rpx;
					width: 8rpx;
					height: 24rpx;
					background: #0063FF;
				}
			}
			
			.utils_right_text {
				font-size: 28rpx;
				font-weight: bold;
				color: #0256FF;
			}
			
			.right_text_title {
				font-size: 24rpx;
				color: #86909C;
			}
		}
		
		/* 客户基础信息 */
		.user_message {
			margin-top: 32rpx;
			.user_message_user {
				.user_message_conetnt {
					.user_conetnt_item {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						
						font-family: 思源黑体;
						font-size: 24rpx;
						color: #4E5969;
						
						.user_content_text {
							margin-bottom: 24rpx;
							&:nth-child(odd) {
								margin-right: 10rpx;
								min-width: 400rpx;
							}
							
							.user_cart_copy {
								margin-left: 20rpx;
								color: #0063FF;
							}
						}
						
						&:last-child {
							margin-bottom: 0;
						}
						
					}
				}
			}
		}
		
	}
</style>